import React, { useState } from "react";
import { Text, View } from "react-native";
import tw from "twrnc";
import CountryFlag from "react-native-country-flag";
import { useDispatch } from 'react-redux';
import { selectCountry } from '@/store/modules/InfoSlice';
import { router } from "expo-router";

export default function Country() {
  const dispatch = useDispatch();
  const countryList = [
    { id: 1, isoCode: "CN", name: "中国", areaCode: "+86" },
    { id: 2, isoCode: "US", name: "美国", areaCode: "+1" },
    { id: 3, isoCode: "GB", name: "英国", areaCode: "+44" },
    { id: 4, isoCode: "JP", name: "日本", areaCode: "+81" },
    { id: 5, isoCode: "KR", name: "韩国", areaCode: "+82" },
    { id: 6, isoCode: "DE", name: "德国", areaCode: "+49" },
    { id: 7, isoCode: "FR", name: "法国", areaCode: "+33" },
    { id: 8, isoCode: "ES", name: "西班牙", areaCode: "+34" },
    { id: 9, isoCode: "RU", name: "俄罗斯", areaCode: "+7" },
    { id: 10, isoCode: "BR", name: "巴西", areaCode: "+55" },
    { id: 11, isoCode: "IN", name: "印度", areaCode: "+91" },
    { id: 12, isoCode: "IT", name: "意大利", areaCode: "+39" },
    { id: 13, isoCode: "MX", name: "墨西哥", areaCode: "+52" },
    { id: 14, isoCode: "CA", name: "加拿大", areaCode: "+1" },
    { id: 15, isoCode: "AU", name: "澳大利亚", areaCode: "+61" },
  ];

  return (
    <View>
      {countryList.map((item) => (
        <View
          key={item.id}
          style={tw`flex-row items-center justify-between p-2`}
        >
          <View style={tw`flex-row items-center justify-between p-2`}>
            <CountryFlag
              isoCode={item.isoCode}
              size={50}
              style={tw`rounded-full h-10 w-10`}
            />
            <Text style={tw`ml-2`} onPress={() => {
            dispatch(selectCountry(item));
            router.push('/(auth)/perfect-info');
            
          }}>{item.name}</Text>
          </View>
          <Text>{item.areaCode}</Text>
        </View>
      ))}
    </View>
  );
}
